<template>
    <div class="footer">
        <div v-for="(i,index) in tab" :key="index" :class="['unit',defaultActive===index?'active':'']" @click="tabFunc(index)">
            <span :class="['iconfont',i.icon].join(' ')"></span>
            <span class="name">{{i.name}}</span>
        </div> 
    </div>
</template>
<script>
export default {
    data(){
        return{
            tab:[
                {
                    icon:'icon-icon-test',
                    name:'发现'
                },
                {
                    icon:'icon-lvhang',
                    name:'旅行'
                },
                {
                    icon:'icon-shouye',
                    name:'我的'
                },
            ]
        }
    },
    props:['changeActive','defaultActive'],
    methods:{
        tabFunc(index){
            this.$emit('changeActive',index)
        }
    }
    
}
</script>
<style scoped>
.footer{
    position: fixed;
    bottom: 0;
    height: 50px;
    background: #fff;
    width: 100vw;
}
.footer .unit{
    float: left;
    height: 50px;
    width: 33%;
    text-align: center;
    line-height: 50px;
}
.active{
    color: #58bfc0;
}

.unit .iconfont{
    font-size: 30px;
}
.unit .name{
     font-size: 12px;
}

/* 图标 */

</style>